<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>手风琴</title>
</head>
<style>
    .accordion {
        width: 300px;
    }

    .accordion article {
        cursor: pointer;
    }

    .accordion article+article {
        margin-top: 5px;
    }

    .accordion label {
        display: block;
        padding: 0 20px;
        height: 40px;
        background-color: #f66;
        cursor: pointer;
        line-height: 40px;
        font-size: 16px;
        color: #fff;
    }

    .accordion p {
        overflow: hidden;
        max-height: 0;
        padding: 0 20px;
        border: 1px solid #000;
        border-top: none;
        border-bottom-width: 0;
        transition: all 500ms;
        line-height: 30px;
    }

    .accordion input:nth-child(1):checked~article:nth-of-type(1) p,
    .accordion input:nth-child(2):checked~article:nth-of-type(2) p,
    .accordion input:nth-child(3):checked~article:nth-of-type(3) p {
        border-bottom-width: 1px;
        min-height: 600px;
    }

    /* .accordion:nth-child(1) {
        background-color: green;
    }
    .accordion article:nth-of-type(1) {
        background-color: black;
    } */
</style>

<body>
    <div class="accordion">
        <input type="checkbox" id="collapse1" hidden="hidden">
        <input type="checkbox" id="collapse2" hidden="hidden">
        <input type="checkbox" id="collapse3" hidden="hidden">
        <article>
            <label for="collapse1">列表1</label>
            <p>内容1<br>内容2<br>内容3<br>内容4<br></p>
        </article>
        <article>
            <label for="collapse2">列表2</label>
            <p>内容1<br>内容2<br>内容3<br>内容4<br></p>
        </article>
        <article>
            <label for="collapse3">列表3</label>
            <p>内容1<br>内容2<br>内容3<br>内容4<br></p>
        </article>
    </div>
</body>

</html>